<template>
  <div class="cinemas">
    <van-nav-bar :title="filmObj.name" fixed>
      <template #left>
        <span @click="goBack">
          <van-icon name="arrow-left" size="13" />
        </span>
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="toSearch" />
      </template>
    </van-nav-bar>
    <div class="content">
      <van-tabs color="#ff5f16" @click="selecDate()" v-model="activeShowDate">
        <van-tab
          v-for="obj in showDateList"
          :key="obj.showDate"
          :title="formatDate(obj.showDate)"
          :name="obj.showDate"
          />
      </van-tabs>
      <van-dropdown-menu class="cinemas-nav" active-color="#ff5f16">
        <van-dropdown-item v-model="area" :options="areaOption"/>
        <van-dropdown-item v-model="ticketFlag" :options="ticketOption" />
        <van-dropdown-item v-model="last" :options="lastOption" />
      </van-dropdown-menu>
      <div class="cinemas-list">
        <cinemaItem
          v-for="cinema in showCinemas"
          :key="cinema.cinemaId"
          from="film"
          :showDate="activeShowDate" 
          :cinema="cinema"
        />
      </div>
    </div>
   
  </div>
</template>

<script>
import cinemaItem from "@/components/cinema-item.vue";
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'; 
export default {
  components: {
    cinemaItem,
  },
  data() {
    return {
      activeShowDate: '',
      filmId: this.$route.params.filmId,
      filmObj: {},
      showDateList: [],
      cityId: localStorage.cityId,


      cityName: localStorage.cityName,
      cinemas: [],
      cinemaIds: "",
      area: "all",
      areaOption: [{ text: "全城", value: "all" }],
      ticketFlag: 1,
      ticketOption: [
        { text: "APP购票", value: 1 },
        { text: "前台兑换", value: 2 },
      ],
      last: 1,
      lastOption: [
        { text: "最近去过", value: 1 },
        { text: "离我最近", value: 2 },
      ],
    };
  },
  created() {
    this.getFlimData()
    this.getShowDate()
  },
  computed: {
    showCinemas() {
      if (this.area === "all") {
        return this.cinemas;
      } else {
        return this.cinemas.filter((item) => item.districtId === this.area);
      }
    },
  },
  methods: {
    async getShowCinemas(cinemaIds){
      let res = await this.$api({
        headers:{
          'x-host': 'mall.film-ticket.cinema.batch-cinema'
        },
        url: 'https://m.maizuo.com/gateway',
        method: 'post',
        params:{
          k: '2308483'
        },
        data:{
          cityId: this.cityId,
          cinemaIds: cinemaIds
        }
      })
      this.cinemas = res.data.data.cinemas;
      this.getDistricts(this.cinemas);
    },
    selecDate(){
      let currentObj = this.showDateList.find(obj => obj.showDate === this.activeShowDate)
      let currentCinemaList = currentObj.cinemaList
      this.getShowCinemas(currentCinemaList.join(','))
    },
    formatDate(showDate){
      dayjs.locale('zh-cn'); 
      let weekday = dayjs(showDate * 1000).format('周dd');
      return weekday + ' '+dayjs(showDate * 1000).format("M月D日")
    },
    async getShowDate(){
      let res = await this.$api({
        headers: {
            "X-host": "mall.film-ticket.cinema.film-show-cinema",
          },
          method: "get",
          url: "https://m.maizuo.com/gateway/?filmId=6681&cityId=110100&k=3124768",
          params: {
            filmId: this.$route.params.filmId,
            cityId: this.cityId,
            k:3124768,
          },
      })
      let list = res.data.data.showCinemas
      this.showDateList = list
      this.activeShowDate = this.showDateList[0].showDate
      this.selecDate();
    },
    goBack(){
      this.$router.go(-1)
    },
    async getFlimData(){
      let res = await this.$api({
        headers:{
          'x-host': 'mall.film-ticket.film.info'
        },
        url: 'https://m.maizuo.com/gateway',
        method: 'get',
        params:{
          filmId: this.filmId,
          k: '5534748'
        }
      })
      this.filmObj = res.data.data.film
    },
    getDistricts(cinemas) {
      let districts = [];
      cinemas.forEach((el) => {
        if (!districts.map((item) => item.value).includes(el.districtId)) {
          let obj = {
            text: el.districtName,
            value: el.districtId,
          };
          districts.push(obj);
        }
      });
      this.areaOption.push(...districts);
    },
    toSearch() {
      this.$router.push("/cinemas/search");
    },
  },
};
</script>

<style scoped>
.content {
  padding-top: 44px;
}
.cinemas {
  background: #fff;
}

.van-nav-bar .van-icon,
.van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #000;
}
.cinemas-nav {
  width: 100%;
}

</style>